<template>
<div>
  <div>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <img class="navbar-brand" src="../img/logo2.jpg" id="a1">
  <ul class="navbar-nav">

    <li class="nav-item">
      <a class="nav-link" href="#">欢迎{{$store.state.Login.name}}登录</a>
    </li>
  </ul>
</nav>
  </div>



  <div class="newslist scaleimg">
    <ul>
      <li v-for="(item) in jkzxs " :key="item.id">
        <a href="#" @click="ckxq(item.id)"><img :src="item.img"/></a>
        <strong><a href="#" @click="ckxq(item.id)">{{item.title}}</a></strong>
        <p>{{item.jianlv}}</p>
        <i>{{item.sj}}</i>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data(){
    return{
      jkzxs:[]
    }
  },
  methods:{
    ckxq(id){
      axios.post("http://localhost:8085/queryByIdjkzx",{id:id}).then((response)=>{
        this.$store.commit("Getjkzx",response.data)
        this.$router.push("/jkzxckxq")
      })
      
      
    }
  },
  created(){
    axios.post("http://localhost:8085/queryAlljkzx").then((response)=>{
      this.jkzxs=response.data
    })
  }
}
</script>

<style>
.newslist li{height:144px;margin-top:40px;overflow:hidden;position:relative}.newslist li>a{float:left;display:block;width:218px;height:144px;margin-right:20px;overflow:hidden}.newslist li img{width:100%;height:100%}.newslist li strong{display:block;font-size:20px;line-height:28px;margin-top:1px;max-height:56px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.newslist li p{font-size:14px;line-height:22px;margin-top:12px;height:44px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.newslist li i{display:block;position:absolute;bottom:0;left:238px;margin-top:15px;font-size:14px;line-height:16px;padding-left:24px;background:url(https://image.39.net/dist/common/v2019/pc/channel/images/icon.png) -550px top no-repeat}
.scaleimg img{transform:scale(1);transition:transform .5s}.scaleimg img.zoom{transform:scale(1.2)}
 #a1{
width: 35px;
height: 40px;
}
</style>